<!DOCTYPE html>
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
    <head>

        <!-- Basic Page Needs
  ================================================== -->
        <meta charset="utf-8">
        <title>Your Page Title Here</title>
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Mobile Specific Metas
  ================================================== -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

        <!-- CSS
  ================================================== -->
        <link rel="stylesheet" href="css/style.css">
        <link href="css/jquery.selectbox.css"  rel="stylesheet" />

        <!--[if lt IE 9]>
                <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->


    </head>
    <body>
        <form method="post">
            <div class="container">
                <header>
                    <div class="top-header">
                        <div class="page-content clearfix">
                            <a href="#" class="logout">
                                <span></span>
                                Logout 
                            </a>
                            <div class="user-name">
                                Welcome, Joseph
                            </div>
                            <input type="submit" value="">
                            <input type="text" placeholder="Search">

                            <div class="news-ticker-title">اخر الاخبار</div>
                            <div class="news-list">
                                <ul>
                                    <li>
                                        <a href="news.html">
                                            الاستخبارات الأمريكية: ظهور جماعة في سوريا لا تقل خطورة عن" داعش" - موقع الأخبار اليوم

                                        </a>
                                    </li>
                                    <li>
                                        <a href="news.html">
                                            لوريم إيبسوم هو ببساطة نص شكلي مايكر"  والتي حوت أيضاً على نسخ من نص لوريم .

                                        </a>
                                    </li>
                                    <li>
                                        <a href="news.html">
                                            لوريم إيبسوم هو ببساطة نص شكلي مايكر"  والتي حوت أيضاً على نسخ من نص لوريم .

                                        </a>
                                    </li>
                                    <li>
                                        <a href="news.html">
                                            لوريم إيبسوم هو ببساطة نص شكلي مايكر"  والتي حوت أيضاً على نسخ من نص لوريم .

                                        </a>
                                    </li>
                                    <li>
                                        <a href="news.html">
                                            لوريم إيبسوم هو ببساطة نص شكلي مايكر"  والتي حوت أيضاً على نسخ من نص لوريم .

                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="page-content clearfix">
                        <h1 class="logo">
                            <a href="#">
                                FUEBOOK
                                <span></span>
                            </a>
                        </h1>
                        <a href="#" class="website-name"></a>

                        <div class="quote">
                            <span class="quote-left"></span>
                            <span class="quote-right"></span>
                            In every CHOICES that we choose, There's always a RISK; But always 
                            remember that there's also a chance - Kent Solatorio Lopez 
                        </div>
                        <figure class="user-image">
                            <img src="images/user.png" alt="">
                        </figure>
                    </div>
                </header>
                <section class="content clearfix">
                    <div class="page-content">
                        <div class="colored-sections">
                            <a href="#" class="section green">
                                <div class="details">
                                    <h3>My Stuff</h3>
                                    <p>
                                        Lorem ipsum dolor sit amet
                                        adipiscing elit
                                    </p>
                                </div>
                            </a>
                            <a href="#" class="section gray">
                                <div class="details">
                                    <h3>Evaluation</h3>
                                    <p>
                                        Lorem ipsum dolor sit amet
                                        adipiscing elit
                                    </p>
                                </div>
                            </a>
                            <a href="#" class="section red">
                                <span class="messages-count">17</span>
                                <div class="details">
                                    <h3>Inbox</h3>
                                    <p>
                                        Lorem ipsum dolor sit amet
                                        adipiscing elit
                                    </p>
                                </div>
                            </a>
                            <a href="#" class="section orange">
                                <div class="details">
                                    <h3>Moodle</h3>
                                    <p>
                                        Lorem ipsum dolor sit amet
                                        adipiscing elit
                                    </p>
                                </div>
                            </a>
                        </div>
                        <div class="clearfix content-area">
                            <aside class="left-col">
                                <nav>
                                    <ul>
                                        <li>
                                            <a href="#">Home</a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">Profile</a>
                                            <ul>
                                                <li>
                                                    <a href="#">Main Data</a>
                                                </li>
                                                <li class="current">
                                                    <a href="#">Contact Information</a>
                                                </li>
                                                <li>
                                                    <a href="#">Privacy Settings</a>
                                                </li>
                                                <li>
                                                    <a href="#">My Groups</a>
                                                </li>
                                                <li>
                                                    <a href="#">Researches</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">Academics</a>
                                            <ul>
                                                <li>
                                                    <a href="#">Academic Information</a>
                                                </li>
                                                <li>
                                                    <a href="#">Result</a>
                                                </li>
                                                <li>
                                                    <a href="#">Early Registraion</a>
                                                </li>
                                                <li>
                                                    <a href="#">Alumni</a>
                                                </li>
                                                <li>
                                                    <a href="#">My Bill Payments</a>
                                                </li>
                                                <li>
                                                    <a href="#">My Attendance</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">Activities</a>
                                            <ul>
                                                <li>
                                                    <a href="#">Messaging</a>
                                                </li>
                                                <li>
                                                    <a href="#">My Club</a>
                                                </li>
                                                <li>
                                                    <a href="#">E-Library</a>
                                                </li>
                                                <li>
                                                    <a href="#">Market Place</a>
                                                </li>
                                                <li>
                                                    <a href="#">Gallery</a>
                                                </li>
                                                <li>
                                                    <a href="#">FaceBook Gallery</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>

                                <h3>
                                    Ask-me
                                    <span class="toggle-show"></span>
                                </h3>
                                <div class="ask hidden-box">
                                    <textarea></textarea>
                                    <input type="submit" value="Ask">
                                </div>
                            </aside>
                            <!-- main content -->
                            <article class="main-content">
                                <header>
                                    <h2>
                                        Academics
                                    </h2>
                                    <div class="section-title">Academic Info</div>
                                </header>
                                <ul class="tabs clearfix academic-tabs">
                                    <li><a href="#tab1">Registered Subjects</a></li>
                                    <li><a href="#tab2">Reservations</a></li>
                                    <li><a href="#tab3">Academic Status</a></li>
                                    <li><a href="#tab4">Schedule</a></li>
                                    <li><a href="#tab5">Advising Form</a></li>
                                    <li><a href="#tab6">Exam Schedule</a></li>
                                    <li><a href="#tab7">Borrowed Books</a></li>
                                </ul>
                                <div id="tab1" class="tab-content">
                                    <ul class="form-list academic">
                                        <li class="clearfix">
                                            <label>Student Code </label>
                                            <!--instead of disabled textField-->
                                            <div class="value"> Student Code Here</div>
                                        </li>
                                        <li class="clearfix">
                                            <label>GPA </label>
                                            <div class="value">Name Here</div>
                                        </li>
                                        <li class="clearfix">
                                            <label>CGPA  </label>
                                            <select name="country_id" id="country_id" tabindex="1">
                                                <option value="">text here</option>
                                                <option value="">text here1</option>
                                                <option value="">text here2</option>
                                                <option value="">text here3</option>
                                            </select>
                                        </li>
                                        <li class="clearfix">
                                            <label>Earned Hours  </label>
                                            <select name="country_id" id="country_id1" tabindex="1">
                                                <option value="">text here</option>
                                                <option value="">text here1</option>
                                                <option value="">text here2</option>
                                                <option value="">text here3</option>
                                            </select>
                                        </li>
                                        <li class="clearfix">
                                            <label>Credit Hours </label>
                                            <input type="text" class="medium" disabled>
                                        </li>
                                    </ul>

                                    <div class="report-title">GPA, CGPA Chart</div>
                                    <div class="charts-images">
                                        <figure>
                                            <img src="images/chart.png" width="698">
                                        </figure>
                                    </div>
                                </div>
                                <div id="tab2" class="tab-content">
                                    <ul class="form-list academic">
                                        <li class="clearfix">
                                            <label>Student balance </label>
                                            <input type="text" class="medium" disabled>
                                        </li>
                                        <li class="clearfix">
                                            <label>Accomodation Balance  </label>
                                            <input type="text" class="medium" disabled>
                                        </li>
                                        <li class="clearfix">
                                            <label>Bus Balance   </label>
                                            <input type="text" class="medium" disabled>
                                        </li>
                                        <li class="clearfix">
                                            <label>Services Balance </label>
                                            <input type="text" class="medium" disabled>
                                        </li>
                                        <li class="clearfix">
                                            <label>Currency</label>
                                            <input type="text" class="medium" disabled>
                                        </li>
                                    </ul>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="data-table">
                                        <tr>
                                            <th scope="col">النوع</th>
                                            <th scope="col">المبلغ</th>
                                            <th scope="col">العملة</th>
                                            <th scope="col">الدفع</th>
                                            <th scope="col">التاريخ</th>
                                        </tr>
                                        <tr>
                                            <td>ملف تقديم</td>
                                            <td>500.00</td>
                                            <td>جنيه مصري</td>
                                            <td>نقدى</td>
                                            <td>23/09/2011</td>
                                        </tr>
                                        <tr>
                                            <td>ملف تقديم</td>
                                            <td>500.00</td>
                                            <td>جنيه مصري</td>
                                            <td>نقدى</td>
                                            <td>23/09/2011</td>
                                        </tr>
                                        <tr>
                                            <td>ملف تقديم</td>
                                            <td>500.00</td>
                                            <td>جنيه مصري</td>
                                            <td>نقدى</td>
                                            <td>23/09/2011</td>
                                        </tr>
                                        <tr>
                                            <td>ملف تقديم</td>
                                            <td>500.00</td>
                                            <td>جنيه مصري</td>
                                            <td>نقدى</td>
                                            <td>23/09/2011</td>
                                        </tr>
                                    </table>

                                </div>
                                <div id="tab3" class="tab-content">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="data-table">
                                        <tr>
                                            <th scope="col">Year</th>
                                            <th scope="col">Semester</th>
                                            <th scope="col">Status</th>
                                        </tr>
                                        <tr>
                                            <td>2011/2012</td>
                                            <td> 2011</td>
                                            <td>منتظم</td>
                                        </tr>
                                        <tr>
                                            <td>2011/2012</td>
                                            <td> 2011</td>
                                            <td>منتظم</td>
                                        </tr>
                                        <tr>
                                            <td>2011/2012</td>
                                            <td> 2011</td>
                                            <td>منتظم</td>
                                        </tr>
                                        <tr>
                                            <td>2011/2012</td>
                                            <td> 2011</td>
                                            <td>منتظم</td>
                                        </tr>
                                        <tr>
                                            <td>2011/2012</td>
                                            <td> 2011</td>
                                            <td>منتظم</td>
                                        </tr>
                                        <tr>
                                            <td>2011/2012</td>
                                            <td> 2011</td>
                                            <td>منتظم</td>
                                        </tr>
                                    </table>
                                </div>
                                <div id="tab4" class="tab-content">
                                    <figure>
                                        <img src="images/report.png" >
                                    </figure>
                                </div>
                                <div id="tab5" class="tab-content">
                                    <div class="red-title">You have to completed evaluation for all courses</div>
                                </div>
                                <div id="tab6" class="tab-content">
                                    <ul class="form-list academic clearfix">
                                        <li class="clearfix">
                                            <label>Year </label>
                                            <select class="small">
                                                <option>text</option>
                                            </select>
                                        </li>
                                        <li class="clearfix">
                                            <label>Select Study Semister </label>
                                            <select class="small">
                                                <option>text</option>
                                            </select>
                                        </li>
                                        <li class="clearfix">
                                            <label>Choose Exam Type</label>
                                            <select class="small">
                                                <option>text</option>
                                            </select>
                                        </li>
                                        <li>
                                            <div class="form-details">
                                                <div class="button">
                                                    <label> </label>
                                                    <input type="submit" value="Show Report" id="exam">
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                    <figure>
                                        <img src="images/report.png" width="698">
                                    </figure>
                                </div>
                                <div id="tab7" class="tab-content">
                                    <div class="red-title">There is no borrowed Books.</div>
                                </div>

                            </article>
                        </div>
                    </div>
                </section>
            </div>
            <footer>
                <div class="footer-line"></div>
                Copyright © 2014[Future University in Egypt]. All rights reserved.
            </footer>
        </form>
        <script src="js/jquery-1.8.3.min.js"></script>
        <script src="js/jquery.easy-ticker.js"></script>
        <script src="js/jquery.selectbox-0.2.js"></script>
        <script src="js/main.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#country_id").selectbox();
            });
            
//          Tabs ****************************
            
        </script>
    </body>
</html>